
<template>
  <div class='vant-box'>
    <div class="container">
      <van-tabs v-model="active">
        <!-- 控件一 -->
        <van-tab title="控件一">
          <!-- vant 表单 -->
          <van-form @submit="onSubmit">
            <div class="form-item form-item1">
              <!-- <h2 class="label">输入框控件</h2> -->
              <!-- 分割线 -->
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">输入框控件</van-divider>
              <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名"
                clearable
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </div>
            <div style="margin: 16px;">
              <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
            <!-- 日历控件 -->
            <div class="form-item form-item2">
              <!-- <h2 class="label">日历控件</h2> -->
              <!-- 分割线 -->
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">日历控件</van-divider>
              <van-cell title="选择单个日期" :value="date" @click="show = true" />
              <van-calendar v-model="show" @confirm="onConfirm" />

              <van-cell title="选择日期区间" :value="dateRange" @click="rangeShow = true" />
              <van-calendar v-model="rangeShow" type="range" @confirm="onConfirmRange" />
            </div>
            <!-- 按钮 -->
            <div class="form-item form-item3">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">按钮控件</van-divider>
              <van-button type="primary" @click="vanBtn" size="mini">迷你按钮</van-button>
              <van-button type="info" disabled size="small">禁用(小)按钮</van-button>
              <van-button type="info" icon="plus" size="normal">添加</van-button>
              <van-button type="warning" @click="vanLoad">警告按钮</van-button>
              <van-button type="danger">危险按钮</van-button>
              <van-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</van-button>
            </div>
            <!-- 单选框 -->
            <div class="form-item form-item4">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">单选框控件</van-divider>
              <van-radio-group v-model="radios">
                <van-radio name="1" icon-size="16px">单选框 1</van-radio>
                <van-radio name="2" icon-size="16px">单选框 2</van-radio>
                <van-radio name="3" disabled icon-size="16px">单选框 3</van-radio>
                <van-radio name="4" shape="square" icon-size="16px">单选框 4</van-radio>
                <van-radio name="5" checked-color="#07c160" icon-size="16px">单选框 5</van-radio>
              </van-radio-group>
            </div>
            <!-- 复选框 -->
            <div class="form-item form-item5">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">复选框控件</van-divider>
              <van-checkbox v-model="checked" shape="square" icon-size="16px">复选框1</van-checkbox>
              <van-checkbox v-model="checked2" shape="square" icon-size="16px">复选框2</van-checkbox>
              <van-checkbox v-model="checked3" shape="square" icon-size="16px">复选框3</van-checkbox>
            </div>
            <!-- 评分 -->
            <div class="form-item form-item6">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">评分控件</van-divider>
              <van-rate v-model="rateValue" />
              <van-rate v-model="rateValue1" disabled/>
              <van-rate v-model="rateValue2" icon="like" void-icon="like-o" />
              <van-rate v-model="rateValue3" allow-half void-icon="star" void-color="#eee" />
              <van-rate v-model="rateValue4" readonly />
            </div>
          </van-form>
          <!-- Stepper -->
          <div class="form-item form-item7">
            <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">滑块控件</van-divider>
            <van-slider v-model="sliderValue" @change="onChange" />
            <br><br>
          </div>
        </van-tab>
        <!-- 控件二 -->
        <van-tab title="控件二">
          <van-form @submit="onSubmit">
            <!-- Switch -->
            <div class="form-item form-item8">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">Switch 开关</van-divider>
              <van-switch size="24" v-model="SwitchChecked" />
              <van-switch size="24" v-model="SwitchChecked1" disabled />
              <van-switch size="24" v-model="SwitchChecked2" active-color="#07c160" inactive-color="#ee0a24" />
              <van-switch size="24" v-model="SwitchChecked3" loading />
              <van-switch size="24" :value="SwitchChecked4" @input="onInputs" />
            </div>
            <!-- 键盘控件 -->
            <div class="form-item">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">键盘控件</van-divider>
              <van-field readonly clickable :value="keyValue" @touchstart.native.stop="keyShow = true" placeholder="请输入 长度限制10位"/>
              <van-number-keyboard v-model="keyValue" :show="keyShow" :maxlength="10" @blur="keyShow = false"/>
              <!-- 密码输入框 -->
              <van-password-input class="mt10" :value="passwordValue" info="密码为 6 位数字" :focused="showKeyboard" @focus="showKeyboard = true"/>
              <!-- 数字键盘 -->
              <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false"/>
            </div>
            <!-- 倒计时 -->
            <div class="form-item form-item9">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">倒计时控件</van-divider>
              <van-count-down :time="time" />
              <!-- 已定义格式 -->
              <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />

              <!-- 手动控制 millisecond展示毫秒 -->
              <van-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="finish"/>
              <van-grid clickable>
                <van-grid-item text="开始" icon="play-circle-o" @click="start" />
                <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
                <van-grid-item text="重置" icon="replay" @click="reset" />
              </van-grid>
            </div>
            <!-- Dialog 弹出框 -->
            <div class="form-item">
              <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">Dialog 弹出框控件</van-divider>
              <van-button type="primary" @click="dialogBtn">提示弹窗</van-button>
              <van-button type="primary" @click="dialogConfirmBtn">确认弹窗</van-button>
            </div>
          </van-form>
        </van-tab>
        <!-- 控件三 -->
        <van-tab title="控件三">
          <div class="form-item">
            <!-- 上传组件 -->
            <van-divider :style="{ color: '#666', borderColor: '#666', padding: '0 16px' }">上传组件</van-divider>
            <!-- <van-uploader :after-read="afterRead" /> -->
            <van-uploader v-model="fileList" multiple />
          </div>
          <!-- 分享面板 -->
          <div class="form-item">
            <van-divider :style="{ color: '#666', borderColor: '#666', padding: '0 16px' }">分享面板组件</van-divider>
            <van-cell title="显示分享面板" @click="showShare = true" />
            <van-share-sheet
              v-model="showShare"
              title="立即分享给好友"
              :options="options"
              @select="onSelect"
            />
          </div>
          <div class="form-item10">
            <van-divider :style="{ color: '#666', borderColor: '#666', padding: '0 16px' }">滑动单元格</van-divider>
            <van-swipe-cell>
              <template #left>
                <van-button square type="primary" text="选择" />
              </template>
              <van-cell class="mb10" :border="false" title="单元格" value="内容" />
              <template #right>
                <van-button square type="danger" text="删除" />
                <van-button square type="primary" text="收藏" />
              </template>
            </van-swipe-cell>
            <van-swipe-cell :before-close="beforeClose">
              <van-card
                num="2"
                price="2.00"
                desc="描述信息"
                title="商品标题"
                class="goods-card"
                thumb="https://img.yzcdn.cn/vant/cat.jpeg"
              />
              <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
              </template>
            </van-swipe-cell>
          </div>
        </van-tab>
        <van-tab title="控件四">
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
          </van-swipe>
          <!-- 九宫格 -->
          <van-divider :style="{ color: '#666', borderColor: '#666', padding: '0 16px' }">九宫格</van-divider>
          <van-grid :column-num="3">
            <van-grid-item icon="photo-o" text="新浪" />
            <van-grid-item icon="certificate" text="百度" />
            <van-grid-item icon="chat-o" text="腾讯" />
            <van-grid-item icon="flower-o" text="阿里" />
            <van-grid-item icon="music-o" text="酷狗" />
            <van-grid-item icon="photo-o" text="搜狐" />
            <van-grid-item icon="fire-o" text="微博" />
            <van-grid-item icon="like-o" text="京东" />
            <van-grid-item icon="chat-o" text="微信" />
          </van-grid>
          <!-- 动作面板 -->
          <van-cell class="mt10" is-link title="动作面板" @click="sheetShow = true" />
          <van-action-sheet
            v-model="sheetShow"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="onSelects"
            @cancel="onCancel"
          />
        </van-tab>
        <van-tab title="控件五">
          <van-cell-group>
            <!-- 选择器 -->
            <van-field
              readonly
              clickable
              name="picker"
              :value="pickerValue"
              label="选择器"
              placeholder="点击选择城市"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @confirm="onConfirms"
                @cancel="showPicker = false"
              />
            </van-popup>
            <!-- 省市选择 -->
            <van-field
              readonly
              clickable
              name="area"
              :value="Areavalue"
              label="地区选择"
              placeholder="点击选择省市区"
              @click="showArea = true"
            />
            <van-popup v-model="showArea" position="bottom">
              <van-area
                :area-list="areaLists"
                value="110101"
                :columns-placeholder="['请选择', '请选择', '请选择']"
                @confirm="onConfirmArea"
                @cancel="showArea = false"
              />
            </van-popup>
            <!-- 输入任意文本 -->
            <van-field v-model="text" label="文本" clearable />
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="tel" type="tel" label="手机号" />
            <!-- 允许输入正整数，调起纯数字键盘 -->
            <van-field v-model="digit" type="digit" label="整数" />
            <!-- 允许输入数字，调起带符号的纯数字键盘 -->
            <van-field v-model="number" type="number" label="数字" />
            <!-- 输入密码 -->
            <van-field v-model="passwords" type="password" label="密码" />
            <!-- 只读 -->
            <van-field label="文本" value="输入框只读" readonly />
            <!-- 禁用 -->
            <van-field label="文本" value="输入框已禁用" disabled />
            <van-field
              v-model="iptValue1"
              label="文本"
              left-icon="smile-o"
              right-icon="warning-o"
              placeholder="显示图标"
            />
            <van-field
              v-model="iptValue2"
              clearable
              label="文本"
              left-icon="music-o"
              placeholder="显示清除图标"
            />
            <van-field
              v-model="sms"
              center
              clearable
              label="短信验证码"
              placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary">发送验证码</van-button>
              </template>
            </van-field>
            <van-field
              v-model="message"
              rows="1"
              autosize
              label="高度自适应"
              type="textarea"
              placeholder="请输入留言"
            />
            <van-field
              v-model="txtTotalNum"
              rows="2"
              autosize
              label="字数统计"
              type="textarea"
              maxlength="50"
              placeholder="请输入留言"
              show-word-limit
            />
            <van-field
              v-model="textAlignRight"
              label="右对齐"
              placeholder="输入框内容右对齐"
              input-align="right"
            />
            <br>
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import Vue from 'vue'
import { Toast, Dialog } from 'vant'
import areaList from '@/assets/js/area.js'

Vue.use(Toast)
Vue.use(Dialog)

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {

  },
  data () {
    // 这里存放数据
    return {
      active: 0,
      username: '',
      password: '',
      date: '', // 单日日历
      dateRange: '', // 区间日历
      show: false,
      rangeShow: false,
      keyValue: '', // 软键盘
      keyShow: false,
      passwordValue: '',
      showKeyboard: true,
      radios: 1, // 单选框
      checked: true, // 复选框
      checked2: false,
      checked3: false,
      rateValue: '', // 评分
      rateValue1: 3, // 评分禁用
      rateValue2: '',
      rateValue3: 3.5,
      rateValue4: 3, // 评分只读
      sliderValue: 60, // 步进器
      SwitchChecked: false, // switch 开关
      SwitchChecked1: true,
      SwitchChecked2: true,
      SwitchChecked3: true,
      SwitchChecked4: false,
      fileList: [
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://img.yzcdn.cn/vant/leaf.jpg', isImage: true }
      ],
      dialogShow: false,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      time: 30 * 60 * 60 * 1000, // 倒计时
      tel: '',
      text: '',
      digit: '',
      number: '',
      passwords: '',
      iptValue1: '',
      iptValue2: '',
      sms: '', // 验证码
      message: '',
      txtTotalNum: '',
      textAlignRight: '',
      pickerValue: '',
      columns: ['杭州', '武汉', '黄冈', '深圳', '上海', '北京'],
      showPicker: false,
      Areavalue: '',
      showArea: false,
      areaLists: null,
      sheetShow: false,
      actions: [
        { name: '选项一' },
        { name: '选项二 (禁用)', disabled: true },
        { name: '选项三' },
        { name: '选项四', subname: '描述信息' }
      ]
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.areaLists = areaList
  },
  // 方法集合
  methods: {
    onSubmit (values) {
      console.log(values)
    },
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      this.show = false
      this.date = this.formatDate(date)
    },
    // 区间日历控件
    onConfirmRange (date) {
      const [start, end] = date
      this.rangeShow = false
      this.dateRange = `${this.formatDate(start)} - ${this.formatDate(end)}`
    },
    vanBtn () {
      Toast('我是成功按钮')
    },
    vanLoad () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      })
    },
    // 软键盘输入密码
    onInput (key) {
      this.passwordValue = (this.passwordValue + key).slice(0, 6)
    },
    onDelete () {
      this.passwordValue = this.passwordValue.slice(0, this.passwordValue.length - 1)
    },
    // 步进器
    onChange (value) {
      Toast(value)
    },
    // switch 开关确认弹窗
    onInputs (checked) {
      Dialog.confirm({
        title: '提醒',
        message: '是否切换开关？'
      }).then(() => {
        this.SwitchChecked4 = checked
      })
    },
    // 上传
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    // 弹窗
    dialogBtn () {
      Dialog.alert({
        title: '标题啊',
        message: '内容啊'
      }).then(() => {
        Toast('确定了')
      })
    },
    dialogConfirmBtn () {
      Dialog.confirm({
        title: '标题啊',
        message: '确认框内容哦123',
        cancelButtonText: '取消哦'
      }).then(() => {
        Toast('确定了')
      }).catch(() => {
        Toast('取消了')
      })
    },
    // 分享面板
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
    // 滑动单元格
    beforeClose ({ position, instance }) {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close()
            Toast('确定了')
          })
          break
      }
    },
    // 倒计时
    start () {
      this.$refs.countDown.start()
    },
    pause () {
      this.$refs.countDown.pause()
    },
    reset () {
      this.$refs.countDown.reset()
    },
    finish () {
      Toast('倒计时结束')
    },
    // 选择器
    onConfirms (value) {
      this.pickerValue = value
      this.showPicker = false
    },
    onConfirmArea (values) {
      this.Areavalue = values.map((item) => item.name).join('/')
      this.showArea = false
    },
    onSelects (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      Toast(item.name)
    },
    // 动作面板
    onCancel () {
      Toast('取消了...')
    }
  }
}
</script>

<style lang='less' scoped>
 .vant-box {
   .container {
     font-size: 20px;
     .van-password-input {
       margin: 0;
     }
     .form-item {
       .van-button {
         display: inline-block;
         width: 30%;
         margin: 0 10px 10px 0;
       }
     }
     .form-item3, .form-item4, .form-item5, .form-item6, .form-item7,.form-item8, .form-item9 {
       padding: 0 10px;
     }
     .form-item4 {
       .van-radio {
         margin-bottom: 10px;
       }
     }
     .form-item5 {
       .van-checkbox {
         margin-bottom: 10px;
       }
     }
     .form-item6 {
       .van-rate {
         width: 60%;
         margin-bottom: 10px;
       }
     }
     .form-item8 {
       .van-switch {
         margin-right: 15px;
       }
     }
     .form-item9 {
       .van-count-down {
         margin-bottom: 10px;
       }
     }
     .form-item10 {}
     .goods-card {
        margin: 0;
        background-color: #fff;
      }
      .delete-button {
        height: 100%;
      }
      .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
   }
 }
</style>

